<template>
<!-- 我的兑换 -->
  <view>
    <!-- 导航栏 -->
    <!-- <view class="navigation">
      <u-navbar
       :titleStyle="{  fontSize: '40rpx',}"
        title="我的兑换"
        leftIconSize="50rpx"
        :fixed="false"
        @rightClick="rightClick"
        @leftClick="leftClick"
      >
      </u-navbar>
    </view> -->

    <!-- 标签 -->
    <view class="fixation">
          <view class="label">
           <!-- itemStyle="  margin-left: 50rpx; height: 60px;" -->
             <!-- fontSize: '30rpx', -->
    <view class="nav">
        <u-tabs
        :list="list"
        lineWidth="100rpx"
        lineHeight='4rpx'
        :inactiveStyle="{  color: '#aaaaaa', fontSize: '26rpx',  }"
        lineColor="#090909"
        :scrollable='false'
        :activeStyle="{
            color: '#303133',
            fontSize: '30rpx',
            fontWeight: 700,
         
        }"

        @change="click"
      ></u-tabs>
    </view>
    </view>
    </view>

    <!-- 商品 -->
    <view class="commodity" v-for="(value,index) in item2" :key="index" @click="details(value)">
      <view class="commodity_content">
        <view class="commodity_content_left">
            <image :src="value.product?value.product.mainImg:null" alt="">
        </view>
        <view class="commodity_content_right">
          <view class="commodity_content_up">
              <view class="commodityname">{{value.product.name}}</view>
              <view class="commodity_content_up_below">
                  <view class="commodity_content_up_specName">{{value.product.specName}}</view>
                  <view class="commodity_content_up_specName specName_left">{{value.property1}}</view>
              </view>
          </view>
          <view class="commodity_content_below">
              <view  :class="{blue:value.state==='待付款'||value.state==='待收货'}"  class="commodity_content_below_up">{{value.state}}</view>
              <view class="commodity_content_below_below">
                <view class="payment">支付</view>
                <view class="money">{{value.payPrice}}</view>
                <view class="Fortunella">金豆</view>
                <view v-if="value.usePoint" class="money ">
                  <view class="hide">+</view>
                  <view class="money">{{value.usePoint}}</view>
                  <view class="hide">元</view>
                </view>
              </view>
          </view>
        </view>
      </view>
      <!-- <view>
         <view class="operation" :class="{Colorchange:value.affirm==='取消申请'}" v-if="value.affirm">{{value.affirm}}</view>
         <view class="operation" v-if="value.logistics">{{value.logistics}}</view>
      </view> -->

    </view>

      <view class="toload" v-if="jiazai">
      <view class="border border_left"></view>
      <u-loading-icon></u-loading-icon>
      <view class="loading"> 拼命加载中...</view>
      <view class="border border_right"></view>
    </view>
    <view class="toload" v-if="load">
      <view class="border border_left"></view>
      <view class="loading"> 没有更多了</view>
      <view class="border border_right"></view>
    </view>

  </view>
</template>

<script>
import { getredemptionorder } from "../../../config/api";
export default {
  data() {
    return {
      list: [
        {
          name: "全部",
          type: "all",
        },
        {
          name: "待付款",
          type: "wait_pay",
        },
        {
          name: "待发货",
          type: "ship",
        },
        {
          name: "待收货",
          type: "receipt",
        },
        {
          name: "已完成",
          type: "complete",
        },
      ],
      item: [],
      item2: [],
      paging: {
        page: 1,
        list_rows: 10,
      },
      Navigation: "all", // 默认teb切换栏
      jiazai: false,
      load: false,
      total: 0, // 数据总条数
    };
  },
  onShow() {},
  async created() {
    this.alltype();
  },
  methods: {
    async click(item) {
      this.Navigation = item.type;
      this.paging.page = 1;
      this.jiazai = false;
      this.load = false;
      this.total = 0;
      console.log("索引改变", item.type, this.Navigation);
      if (item.type === "all") {
        this.item2 = [];
        setTimeout(() => {
          this.alltype();
        }, 100);
      }
      if (item.type === "wait_pay") {
        this.item2 = [];
        setTimeout(() => {
          this.obligation();
        }, 100);
      }
      if (item.type === "ship") {
        this.item2 = [];
        setTimeout(() => {
          this.goods();
        }, 100);
      }
      if (item.type === "receipt") {
        this.item2 = [];
        setTimeout(() => {
          this.receiving();
        }, 100);
      }
      if (item.type === "complete") {
        this.item2 = [];
        setTimeout(() => {
          this.already();
        }, 100);
      }
    },
    // 已完成
    async already() {
      if (this.Navigation === "complete") {
        console.log(this.Navigation);

        let res = await getredemptionorder({
          ...this.paging,
          state: "complete",
        });
        console.log("待发货", res);
        this.total = res.total;
        this.item = res.items;

        let list2 = this.item.map((item) => {
          console.log(384, item.state);
          if (item.state === "complete") {
            return {
              ...item,
              state: "已完成",
              affirm: "申请售后",
            };
          }
          if (item.state === "wait_pay") {
            return {
              ...item,
              state: "待付款",
              affirm: "立即付款",
            };
          }
          if (item.state === "receipt") {
            return {
              ...item,
              state: "待收货",
              affirm: "确认收货",
              logistics: "查看物流",
            };
          }
          if (item.state === "ship") {
            return {
              ...item,
              state: "待发货",
            };
          }
          if (item.state === "close") {
            return {
              ...item,
              state: "已关闭",
              affirm: "取消申请",
            };
          }
        });

        this.item2 = [...list2, ...this.item2];
        console.log(this.item2);
      }
    },
    // 待收货
    async receiving() {
      if (this.Navigation === "receipt") {
        console.log(this.Navigation);

        let res = await getredemptionorder({
          ...this.paging,
          state: "receipt",
        });
        console.log("待发货", res);
        this.total = res.total;
        this.item = res.items;

        let list2 = this.item.map((item) => {
          console.log(384, item.state);
          if (item.state === "complete") {
            return {
              ...item,
              state: "已完成",
              affirm: "申请售后",
            };
          }
          if (item.state === "wait_pay") {
            return {
              ...item,
              state: "待付款",
              affirm: "立即付款",
            };
          }
          if (item.state === "receipt") {
            return {
              ...item,
              state: "待收货",
              affirm: "确认收货",
              logistics: "查看物流",
            };
          }
          if (item.state === "ship") {
            return {
              ...item,
              state: "待发货",
            };
          }
          if (item.state === "close") {
            return {
              ...item,
              state: "已关闭",
              affirm: "取消申请",
            };
          }
        });

        this.item2 = [...list2, ...this.item2];
        console.log(this.item2);
      }
    },
    // 待发货
    async goods() {
      if (this.Navigation === "ship") {
        console.log(this.Navigation);

        let res = await getredemptionorder({
          ...this.paging,
          state: "ship",
        });
        console.log("待发货", res);
        this.total = res.total;
        this.item = res.items;

        let list2 = this.item.map((item) => {
          console.log(384, item.state);
          if (item.state === "complete") {
            return {
              ...item,
              state: "已完成",
              affirm: "申请售后",
            };
          }
          if (item.state === "wait_pay") {
            return {
              ...item,
              state: "待付款",
              affirm: "立即付款",
            };
          }
          if (item.state === "receipt") {
            return {
              ...item,
              state: "待收货",
              affirm: "确认收货",
              logistics: "查看物流",
            };
          }
          if (item.state === "ship") {
            return {
              ...item,
              state: "待发货",
            };
          }
          if (item.state === "close") {
            return {
              ...item,
              state: "已关闭",
              affirm: "取消申请",
            };
          }
        });

        this.item2 = [...list2, ...this.item2];
        console.log(this.item2);
      }
    },
    // 待付款
    async obligation() {
      if (this.Navigation === "wait_pay") {
        console.log(this.Navigation);

        let res = await getredemptionorder({
          ...this.paging,
          state: "wait_pay",
        });
        console.log("待发货", res);
        this.total = res.total;
        this.item = res.items;

        let list2 = this.item.map((item) => {
          console.log(384, item.state);
          if (item.state === "complete") {
            return {
              ...item,
              state: "已完成",
              affirm: "申请售后",
            };
          }
          if (item.state === "wait_pay") {
            return {
              ...item,
              state: "待付款",
              affirm: "立即付款",
            };
          }
          if (item.state === "receipt") {
            return {
              ...item,
              state: "待收货",
              affirm: "确认收货",
              logistics: "查看物流",
            };
          }
          if (item.state === "ship") {
            return {
              ...item,
              state: "待发货",
            };
          }
          if (item.state === "close") {
            return {
              ...item,
              state: "已关闭",
              affirm: "取消申请",
            };
          }
        });

        this.item2 = [...list2, ...this.item2];
        console.log(this.item2);
      }
    },
    // 全部类型
    async alltype() {
      let res = await getredemptionorder({ ...this.paging, state: null });
      console.log(101, res.items);
      this.total = res.total;
      this.item = res.items;

      let list2 = this.item.map((item) => {
        if (item.state === "complete") {
          return {
            ...item,
            state: "已完成",
            affirm: "申请售后",
          };
        }
        if (item.state === "wait_pay") {
          return {
            ...item,
            state: "待付款",
            affirm: "立即付款",
          };
        }
        if (item.state === "receipt") {
          return {
            ...item,
            state: "待收货",
            affirm: "确认收货",
            logistics: "查看物流",
          };
        }
        if (item.state === "ship") {
          return {
            ...item,
            state: "待发货",
          };
        }
        if (item.state === "close") {
          return {
            ...item,
            state: "已关闭",
            affirm: "取消申请",
          };
        }
      });

      this.item2 = [...this.item2, ...list2];
      console.log(this.item2);
    },
    details(value) {
      console.log(value);
      uni.navigateTo({
        url:
          "/pages_v2/commodity/orderdetails/index?value=" +
          JSON.stringify(value),
      });
    },
  },
  // 滚动条触底事件
  async onReachBottom() {
    console.log(123);
    this.jiazai = true;
    if (this.item2.length >= this.total) {
      console.log("没有下一页了");
      uni.showToast({
        title: "没有更多了",
        icon: "none",
      });
      this.jiazai = false;
      this.load = true;
      return;
    }
    // 页码加加
    this.paging.page++;
    if (this.Navigation === "all") {
      this.alltype();
    }

    if (this.Navigation === "wait_pay") {
      this.obligation();
    }

    if (this.Navigation === "ship") {
      this.goods();
    }

    if (this.Navigation === "receipt") {
      this.receiving();
    }

    if (this.Navigation === "complete") {
      this.already();
    }
  },

  async onPullDownRefresh() {
    console.log(1);
    this.paging.page = 1;
    this.item2 = [];
    this.load = false;
    if (this.Navigation === "all") {
      await this.alltype();
    }
    if (this.Navigation === "wait_pay") {
      await this.obligation();
    }
    if (this.Navigation === "ship") {
      await this.goods();
    }
    if (this.Navigation === "receipt") {
      await this.receiving();
    }
    if (this.Navigation === "complete") {
      await this.already();
    }

    uni.stopPullDownRefresh();
  },
};
</script>

<style lang="scss" scoped>
.nav {
  // margin-left: 50rpx;
}

.fixation {
  height: 88rpx;
}
.label {
  width: 100%;
  height: 88rpx;
  position: fixed;
  background-color: #fff;
  z-index: 1;
}
.commodity {
  // background-color: pink;
  height: 320rpx;
  // background-color: skyblue;
  border-top: 1rpx solid #eeeeee;
  .commodity_content {
    height: 200rpx;
    margin-top: 38rpx;
    // margin-bottom: 81rpx;
    // background-color: red;
    display: flex;
    .commodity_content_left {
      width: 200rpx;
      height: 200rpx;
      // background-color: #1aa034;
      margin-left: 26rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .commodity_content_right {
      // display: flex;
      // flex-direction: column;
      // justify-content: space-around;

      margin-left: 20rpx;
      .commodity_content_up {
        // border: 1rpx solid pink;
        .commodityname {
          font-size: 28rpx;
          font-weight: 700;
          color: #000;
        }
        .commodity_content_up_below {
          display: flex;

          .commodity_content_up_specName {
            font-size: 24rpx;
            color: #888;
            margin-top: 18rpx;
          }
          .specName_left {
            margin-left: 10rpx;
          }
        }
      }
      .commodity_content_below {
        .commodity_content_below_up {
          font-size: 24rpx;
          color: #4a4a4a;
          margin: 20rpx 0 24rpx 0;
        }
        .blue {
          color: #4a7be9 !important;
        }
        .commodity_content_below_below {
          display: flex;
          align-items: center;
          .money {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            color: #000;
            font-weight: 700;
            margin: 0 6rpx 0 8rpx;
            .hide {
              font-size: 22rpx;
              color: #000;
              font-weight: 400;
            }
          }
          .payment {
            font-size: 24rpx;
            color: #000;
          }
          .Fortunella {
            font-size: 22rpx;
            color: #000;
          }
        }
      }
    }
  }
}
.operation {
  float: right;
  width: 146rpx;
  height: 50rpx;
  font-size: 24rpx;
  color: #7097ed;
  text-align: center;
  line-height: 50rpx;
  border-radius: 25rpx;
  margin-top: 15rpx;
  margin-right: 26rpx;
  border: 1px solid #7097ed;
}
.Colorchange {
  color: #7e7e7e;
  border: 1rpx solid #7e7e7e;
}
.toload {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
  margin-top: 30rpx;
  .border {
    width: 100rpx;
    border-top: 1rpx solid #b4b4b4;
  }
  .border_left {
    margin-right: 40rpx;
  }
  .border_right {
    margin-left: 40rpx;
  }
  .loading {
    margin-left: 10rpx;
  }
}
</style>
